<template>
    <div class="detail-container" v-loading="loading">
                <el-card class="box-card" style="padding:20px;width:840px;height:1188px;margin:0 auto">
                    <div id="print-div2">
                        <div class="title">工业品买卖合同</div>
                        <div class="paper-top" style="font-size: 14px;margin-top: 10px;margin-bottom: 10px;position: relative;">
                            <div style="width:100%;overflow: hidden">
                                <div style="box-sizing: border-box;overflow: hidden;line-height: 22px;width:60%;float:left;">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="">
                                        <tr>
                                            <td><div style="width:120px;white-space:nowrap;"><div class="label" style="letter-spacing:2px">出卖人(供方)：</div></div></td>
                                            <td width="620">
                                                <div style="width:100%;">
                                                    <div class="text" style="border-bottom: 1px solid #000;">{{orderInfo.supplierName}}</div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><div style="width:120px;white-space:nowrap;"><div class="label" style="letter-spacing:2px">买受人(需方)：</div></div></td>
                                            <td width="620">
                                                <div style="width:100%;">
                                                    <div class="text" style="border-bottom: 1px solid #000;">{{orderInfo.buyerName}}</div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="box-sizing: border-box;overflow: hidden;line-height: 22px;width:40%;float:left;">
                                    <div style="box-sizing: border-box;overflow: hidden">
                                        <div style="width:85px;float:left;padding-left:15px;"><div class="label">合同编号：</div></div>
                                        <div  style="width:calc(100% - 100px);float:left;">
                                            <div class="text" style="border-bottom: 1px solid #000;">{{orderInfo.orderSn}}</div>
                                        </div>
                                    </div>

                                    <div style="box-sizing: border-box;overflow: hidden">
                                        <div style="width:85px;float:left;padding-left:15px;"><div class="label">签订地点：</div></div>
                                        <div  style="width:calc(100% - 100px);float:left;">
                                            <div class="text" style="border-bottom: 1px solid #000;">常州</div>
                                        </div>
                                    </div>

                                    <div style="box-sizing: border-box;overflow: hidden">
                                        <div style="width:85px;float:left;padding-left:15px;"><div class="label">签订日期：</div></div>
                                        <div  style="width:calc(100% - 100px);float:left;">
                                            <div class="text" style="border-bottom: 1px solid #000;">{{orderInfo.createDate}}</div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div style="clear: both"></div>

                        <div class="paper-title">
                            <span class="title-no">第一条</span>标的、数量、价款及交（提）货时间：
                        </div>
                        <div class="good-table">
                            <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-left:2px solid #000;border-bottom:2px solid #000">
                                <tr>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">商品名称</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">规格型号</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;width:40px;">单位</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">数量</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">单价(含税元)</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">不含税金额（元）</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">含税金额（元）</th>
                                    <th align="center" style="border-top:2px solid #000;padding:5px;font-size:13px;">交提货日期</th>
                                    <th align="center" style="border-right: 2px solid #000;border-top:2px solid #000;padding:5px;font-size:13px;">备注</th>
                                </tr>
                                <tr v-for="item in orderInfo.orderGoods">
                                    <td align="center"><div class="td-con">{{item.goodsName}}</div></td>
                                    <td align="center"><div class="td-con" >{{item.goodsSn}}</div></td>
                                    <td align="center" style="width:40px"><div class="td-con">{{item.goodsUnit}}</div></td>
                                    <td align="center"><div  class="td-con" style="white-space:nowrap;">{{item.goodsNum}}</div></td>
                                    <td align="center"><div class="td-con" style="white-space:nowrap;">{{item.goodsPrice}}</div></td>
                                    <td align="center"><div style="white-space:nowrap;"  class="td-con">{{item.goodsAmountNotTax}}</div></td>
                                    <td align="center"><div style="white-space:nowrap;"  class="td-con">{{item.goodsAmount}}</div></td>
                                    <td align="center"><div style="white-space:nowrap;"  class="td-con">{{item.goodsDeliveryDate}}</div></td>
                                    <td align="center"  style="border-right: 2px solid #000"><div class="td-con" style="max-width:150px">{{item.goodsRemark}}</div></td>
                                </tr>
                                <tr>
                                    <td colspan="2"><div style="letter-spacing: 11px;padding-left:15px">合计</div></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center" style="border-right:0">{{orderInfo.goodsAmountNotTax}}</td>
                                    <td align="center" style="border-right:0">{{orderInfo.goodsAmount}}</td>
                                    <td align="center" style="border-right:0"></td>
                                    <td align="center"  style="border-right: 2px solid #000"></td>
                                </tr>
                            </table>
                        </div>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第二条</div></td>
                                <td><div style="white-space:nowrap;">货物总金额：</div></td>
                                <td width="620" ><div class="tianXie">{{orderInfo.goodsAmountZH | fifterNull}}(供货方按规定开具增值税专用发票) 。</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;">第三条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">质量标准、对质量负责的条件及期限：</div></td>
                                <td width="620" valign="top"><div class="tianXie">原厂正牌，原包原托按原厂出厂标准及原厂厂家售后服务标准执行，原料生产日期不超过合同签订日前六个月</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no"><div style="white-space:nowrap;">第四条</div></td>
                                <td><div style="white-space:nowrap;">包装标准、包装物的供应与回收：</div></td>
                                <td width="620"><div class="tianXie">原厂包装，包装物不回收。</div></td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第五条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">交（提）货方式、地点：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">{{orderInfo.sendType }}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第六条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">运输方式及到达站（港）和费用负担：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">{{orderInfo.freightType}}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第七条</div></td>
                                <td valign="top"><div style="white-space:nowrap;"> 检验标准、方法：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">外观无破损、潮湿，无大面积污渍。如果产品存在质量异议，供方承诺无条件退、换货并承担由此造成的损失。</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第八条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">交（提）货日期：</div></td>
                                <td width="620" valign="top">
                                    <div class="tianXie">按照本合同第一条“标的、数量、价款及交（提）货时间”的条款约定执行</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第九条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">发票：</div></td>
                                <td width="650" valign="top">
                                    <div class="tianXie">供货方于当月 {{orderInfo.invoice}} 号前开具13%的增值税发票并邮寄至需方，所购货发票应于当月全部开清。</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;">第十条</div></td>
                                <td valign="top"><div style="white-space:nowrap;">结算方式、时间：</div></td>
                                <td valign="top" width="620" >
                                    <div class="tianXie">{{orderInfo.settleType}}</div>
                                </td>
                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十一条</div></td>
                                <td valign="top"><div>违约责任：供方延期交货，需方有权要求供方每日承担总货款0.08%的违约金，逾期超过三日，需方有权取消合同，供方还须承担合同总金额30%的违约金。原料质量不符合约定要求等其他违约，供方承担总货款30%违约金。 </div></td>

                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十二条</div></td>
                                <td valign="top"><div >合同争议解决方式：本合同在履行过程中发生的争议，由双方当事人协商解决；协调或调解不成的，依法向合同签订地人民法院起诉。 </div></td>

                            </tr>
                        </table>
                        <table class="paper-title" border="0" width="100%">
                            <tr>
                                <td class="title-no" valign="top"><div style="white-space:nowrap;" >第十三条</div></td>
                                <td valign="top"><div>其他约定事项：</div></td>
                            </tr>
                            <tr>
                                <td class="title-no" valign="top"></td>
                                <td valign="top">
                                    <div>1、收到合同后当日内盖章回传有效，合同传真或电子档件同样有效。本合同生效后，双方均应全面履行本合同约定的义务。任何一方不履行或不完全履行本合同约定义务的，应当承担相应的违约责任，并赔偿由此给守约方造成的损失，包括守约方为实现债权而支付的律师费、保全费诉费、鉴定费等。</div>
                                    <div>2、本合同有效期为自合同签定之日起1年。</div>
                                    <div v-if="orderInfo.otherRemark != ''">3、{{orderInfo.otherRemark}}</div>
                                </td>

                            </tr>
                        </table>
                        <div class="paper-bottom" style="position: relative">
                            <img :src="orderInfo.imageUrl" style="position: absolute;right: 95px; width: 156px;top: 0px;" v-if="type==1"/>
                            <el-row :gutter="20">
                                <el-col :span="12" style="text-align: center">出卖人</el-col>
                                <el-col :span="12" style="text-align: center">买受人</el-col>
                            </el-row>
                            <el-row :gutter="20" style="margin-top:10px">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label" style="letter-spacing:2px">出卖方(章)：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.supplierName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label">买受人（章）：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text">{{orderInfo.buyerName}}</div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">电</span>话：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">电</span>话：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">传</span>真：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">传</span>真：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span>开</span><span style="padding:0 20px;">户</span>行：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span>开</span><span style="padding:0 21px;">户</span>行：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="7"><div class="label"><span style="padding-right:54px">账</span>号：</div></el-col>
                                        <el-col :span="17">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="12">
                                    <el-row>
                                        <el-col :span="8"><div class="label"><span style="padding-right:56px">账</span>号：</div></el-col>
                                        <el-col :span="16">
                                            <div class="text"></div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
<!--                            <div style="text-align: right;margin-top:20px">常州市工商管理局监制</div>-->
                        </div>
                    </div>
                </el-card>
                <div style="margin-top:40px;text-align: center" v-if="type==1">
                    <div style="padding:12px;line-height:22px;font-size:12px"
                         v-show="orderInfo.originalContractUrl != ''">
                        如需刷新PDF,请点击
                        <el-button type="text" @click="generatePdf" :loading="btnLoading"  icon="el-icon-refresh-left">重新生成</el-button>
                        <span style="color:red;padding-left:10px">注：重新生成后原先的PDF将会失效</span>
                    </div>
                    <el-button type="primary" style="width:150px;" @click="seePDF" v-if="orderInfo.originalContractUrl != ''">查看PDF</el-button>
                    <el-button type="primary" style="width:150px;" @click="generatePdf" :loading="btnLoading" v-else>生成PDF</el-button>
                    <el-button  style="width:150px;" @click="goBlack">返回</el-button>
                </div>
                <div style="margin-top:40px;text-align: center" v-if="type==2">
                    <el-button  style="width:150px;" @click="goBlack">返回</el-button>
                </div>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import store from '@/store'
    import {printPurchaseOrder,purchaseOriginalContractUrl} from '@/api/partner'
    import "@/utils/jQuery.print"
    export default {
        name: "customerDetail",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                orderId:this.$route.query.id,
                type:this.$route.query.type,
                orderInfo:{},
                btnLoading:false
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
            this.getPageInfo();
        },
        filters: {
            fifterNull(val){
                if(val == ''){
                    return '无'
                }else{
                    return  val
                }
            }
        },
        methods:{
            goBlack(){
                this.$router.go(-1)
            },
            //打印
            printdiv(){
                $("#print-div2").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },

            seePDF(){
                window.open(this.orderInfo.originalContractUrl);
            },

            generatePdf(){
                this.btnLoading = true;
                purchaseOriginalContractUrl({orderId:this.orderId}).then((res)=>{
                    this.btnLoading = false;
                    this.getPageInfo();
                    window.open(res);
                }).catch(()=>{
                    this.btnLoading = false;
                })
            },

            //获取合同详情
            getPageInfo(){
                this.loading = true;
                printPurchaseOrder({orderId:this.orderId}).then(res=>{
                    this.orderInfo = res;
                    this.loading = false;
                });
            },


        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }
    #print-div2{
        font-size:12px;
        font-family: "SimSun";
        .title{
            font-size:18px;
            font-weight: bold;
            text-align: center;
            line-height: 22px;
            padding-top:20px;
        }
        .paper-top{
            font-size:14px;
            margin-top:10px;
            .label{
            }
            .text{
                border-bottom:1px solid #000;
                line-height: 20px;
                min-height: 20px;
            }
            margin-bottom:10px;
        }
        .paper-title{
            font-size:14px;
            line-height: 20px;
            .title-no{
                padding-right:10px;
            }
            .tianXie{
                font-size:14px;
                text-decoration: underline;
            }
        }
        .good-table{
            table{
                border-left:2px solid #000;
                border-bottom:2px solid #000;
                th{
                    font-weight: normal;
                    font-size:14px;
                    border-top:2px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                    border-right:1px solid #000;
                }
                td{
                    font-weight: normal;
                    border-right:1px solid #000;
                    border-top:1px solid #000;
                    padding:5px 10px;
                    line-height: 20px;
                }
                .td-con{
                    word-break:break-all;
                    font-size:12px;
                }
            }
        }
        .paper-bottom{
            margin-top:20px;
            line-height: 20px;
            font-size:14px;
        }
    }
</style>
